<template>
  <div class="map_city">
    <!-- 地图 -->
    <van-nav-bar title="选择城市" left-arrow  @click-left="onClickLeft" />
    <!--定位城市  -->
    <div class="thCity">
        <h2>定位城市</h2>
        <div>定位失败</div>
    </div>
    <!-- 热门城市 -->
    <div class="hot_city">
         <h2>热门城市</h2>
         <section>
            <div>全国</div>
            <div v-for="item in hotCityList ">{{item.name}}</div>
         </section>
        
    </div>
    <!-- 城市 -->
    <van-index-bar :index-list="letters">
      <!-- {{getCityList}} -->
      <template v-for="item in letters">
        <van-index-anchor :index="item" />
        <template v-if="cityList">
          <template v-for="value in cityList[item].list">
            <van-cell :title="value.name" />
          </template>
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor, NavBar, Cell } from "vant";
import { mapState } from "vuex";
import {getCityList,getHotCityList} from '../../api/request'

Vue.use(IndexBar);
Vue.use(Cell);
Vue.use(IndexAnchor);
Vue.use(NavBar);
export default {
  data() {
    return {
    letters:[],
      cityList:{},
      hotCityList:[]
    };
  },
  async mounted() {
    this.$store.dispatch('main/setShowBtoNav',false)
    let ret = await getCityList()
    this.cityList=ret.data.data
    for(let key in this.cityList){
        this.letters.push(key)
    }
    let hots=await getHotCityList()
    this.hotCityList=hots.data.data.hot_city_List
  },
  methods:{
      onClickLeft(){
          this.$router.push({path:'/main'})
      }
  }
};
</script>

<style lang='scss' >
.van-nav-bar__title {
  font-size: 0.34rem !important;
}
.van-nav-bar__arrow {
  font-size: 0.34rem !important;
}
.van-nav-bar .van-icon {
  color: black;
}
.map_city {
  background: #eeeeee;
  height: 100%;
}
.thCity{
    margin-top: .3rem;
    margin-left: .3rem;
    div{
        height: .5rem;
        width: 3rem;
        text-align: center;
        line-height: .5rem;
        font-size: .3rem;
        margin-top: .1rem;
        background: white;
    }
}
.hot_city{
      margin-top: .3rem;
    margin-left: .3rem;
    
    section{
        display: flex;
        flex-wrap: wrap;
        div{
                height: .6rem;
                width: 2rem;
                margin-top: .1rem;
                margin: .1rem;
                text-align: center;
                line-height: .6rem;
                font-size: .3rem;
                background: white;
            }
    }
   
}
</style>
